<template>
  <a-modal
    :title="formConfig.title"
    v-model:visible="visible"
    width="600px"
    center
  >
    <a-form
      ref="formRef"
      v-if="visible"
      :model="formObj"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item
        v-for="item in formConfig.items"
        :key="item.name"
        :label="item.label"
        :rules="item.rules"
      >
        <a-input
          v-if="item.type === 'hidden'"
          v-model:value="formObj[item.name]"
          type="hidden"
        ></a-input>
        <a-input
          v-if="item.type === 'input'"
          v-model:value="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :disabled="item.disabled"
          allow-clear
        ></a-input>
        <a-input
          v-if="item.type === 'password'"
          v-model:value="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          type="password"
        ></a-input>
        <a-select
          v-else-if="item.type === 'select'"
          v-model:value="formObj[item.name]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :disabled="item.disabled"
        >
          <template v-for="(option, i) in item.options">
            <a-select-opt-group
              v-if="!!option.children"
              :key="`form_${option.label}${i}`"
            >
              <template #label>
                {{ option.label }}
              </template>
              <a-select-option
                v-for="(item, j) in option.children"
                :key="`form_${item.value}_${j}`"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select-opt-group>
            <a-select-option
              v-else
              :key="`form_${option.value}_${i}`"
              :value="option.value"
              >{{ item.label }}</a-select-option
            >
          </template>
        </a-select>
        <a-input-number
          v-else-if="item.type === 'number'"
          v-model:value="formObj[item.name]"
          :placeholder="item.placeholder || `请输入${item.label}`"
          :disabled="item.disabled"
          :min="item.min"
          :max="item.max"
        />
        <a-date-picker
          v-else-if="item.type === 'datetime'"
          v-model:value="formObj[item.name]"
          :placeholder="item.placeholder || `请选择${item.label}`"
          :disabled="item.disabled"
          :disabledDate="item.disabledDate"
        />
        <a-input
          v-else-if="item.type === 'textarea'"
          :disabled="item.disabled"
          v-model:value="formObj[item.name]"
          :rows="3"
          type="textarea"
          :placeholder="item.placeholder || `请输入${item.label}`"
        />
        <a-radio-group
          v-else-if="item.type === 'radio'"
          v-model:value="formObj[item.name]"
        >
          <a-radio
            v-for="item in item.options"
            :key="item.value"
            :label="item.value"
          >
            {{ o.label }}
          </a-radio>
        </a-radio-group>
        <a-checkbox-group
          v-else-if="item.type === 'checkbox'"
          v-model:value="formObj[item.name]"
        >
          <a-checkbox
            v-for="item in item.options"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="cancel(formRef)">取消</a-button>
        <a-button type="primary" @click="submit(formRef)">提交</a-button>
      </span>
    </template>
  </a-modal>
</template>
<script>
import _ from "lodash";
import { reactive, ref, toRefs } from "vue";

export default {
  emits: ["submit"],
  props: {
    formConfig: {
      required: true,
      type: Object,
    },
  },
  setup(props, context) {
    const formRef = ref(null);
    const { formConfig } = { ...props };
    // 根据传参构建对象
    const initObj = _.reduce(
      formConfig.items,
      (arr, o) => {
        arr[o.name] = null;
        return arr;
      },
      {}
    );
    const state = reactive({ formObj: initObj, visible: false });

    const handleOpenForm = (obj = {}) => {
      state.visible = true;
      const data = { ...state.formObj };
      _.forIn(obj, (value, key) => {
        if (_.hasIn(data, key)) {
          data[key] = value;
        }
      });
      state.formObj = data;
    };

    const submit = (formEl) => {
      formEl.validate().then(() => {
        context.emit("submit", { ...state.formObj });
      });
    };

    const cancel = async (formEl) => {
      state.visible = false;
      state.formObj = initObj;
      await formEl.resetFields();
    };

    return {
      formRef,
      ...toRefs(state),
      handleOpenForm,
      submit,
      cancel,
    };
  },
};
</script>
<style lang="less" scoped></style>
